<template>
    <div>
        <div class="shudanbox">
                <h2>{{shudan.title}}</h2>
                <ul>
                    <!-- 跳转至  书单详情页面 -->
                    <li v-for="(item, index) in shudan.lists" :key="index" @click="gopage(item.url)">
                        <img :src="item.img" alt="" />
                        <p>{{ item.introduce }}</p>
                    </li>
                </ul>
            </div>
    </div>
</template>

<script>
export default {
    name: 'WT45ShuDan',
    props:["shudan"],
    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        gopage(url){
            this.$router.push({
                path:url
            })
        }
    },
};
</script>

<style lang="less" scoped>
.shudanbox {
        width: 100%;
        padding: 1rem 2rem;
        margin-top: 1rem;
        border-top: 0.1rem solid rgb(218, 218, 218);

        h2 {
            line-height: 4rem;
        }

        ul {
            display: flex;
            overflow: hidden;

            li {
                width: 8.5rem;
                margin-right: 1rem;
                cursor: pointer;

                img {
                    width: 8.5rem;
                    border-radius: 0.5rem;
                }

                p {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    line-height: 2.8rem;
                    width: 100%;
                }
            }
        }
    }
</style>